import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';

interface FamilyCardProps {
    familyName: string;
    memberCount: number;
    onAddPress: () => void;
}

const FamilyCard: React.FC<FamilyCardProps> = ({ familyName, memberCount, onAddPress }) => {
    return (
        <View style={styles.card}>
            <View style={styles.row}>
                <View style={styles.familyIcon}>
                    <FontAwesome name="home" size={32} color="#3366cc" />
                </View>
                <View style={styles.textArea}>
                    <Text style={styles.familyName}>{familyName}</Text>
                    <Text style={styles.memberCount}>共有{memberCount}人</Text>
                </View>
                <TouchableOpacity style={styles.addBtn} onPress={onAddPress} activeOpacity={0.7}>
                    <FontAwesome name="plus-circle" size={28} color="#3366cc" />
                </TouchableOpacity>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    card: {
        width: 330,
        height: 100,
        borderRadius: 24,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.08,
        shadowRadius: 4,
        elevation: 2,
        marginVertical: 8,
        borderWidth: 1,           // 新增：黑色边框
        borderColor: '#eee',      // 新增：黑色边框
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: '100%',
        paddingHorizontal: 30,
    },
    familyIcon: {
        width: 48,
        height: 48,
        borderRadius: 24,
        marginRight: 16,
        backgroundColor: '#e6f0fa',
        justifyContent: 'center',
        alignItems: 'center',
    },
    textArea: {
        flex: 1,
        justifyContent: 'center',
    },
    familyName: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#222',
        marginBottom: 4,
    },
    memberCount: {
        fontSize: 14,
        color: '#666',
    },
    addBtn: {
        marginLeft: 16,
        padding: 8,
    },
});

export default FamilyCard;

